<template>
    <div style="margin-bottom:20px">
   <el-tag
  v-for="(tag,index) in tags"
  :key="tag.name"
 :closable="tag.name!=='home'"
 size="mini"
 :effect="$route.name===tag.name?'dark':'plain'"
  @click="gotag(tag)"
  @close="deletetag(tag,index)">
  {{tag.label}}
   </el-tag>
 </div>
</template>
<script>
// import { mapState } from 'vuex';
export default {
   data() {
      return {
      }
},  
   methods:{
 gotag(item){
  if(item.path!=this.$route.path)
this.$router.push(item)
 },
 deletetag(item,index){
  // if(index==this.tags.length)
  // {
  //   this.$router.push(this.tags[this.tags.length-1])
  // }
  // else{
  //   this.$router.push(this.tags[this.tags.length-1])
  // }
  if(this.$route.path==item.path)
  {
    this.$router.push(this.tags[index-1]) 
  }
  this.$store.state.tab.valx.splice(index,1)
 }
   },
   computed:{
//   ...mapState({
//    tags:state=>state.tab.valy
//   })
tags(){
    return this.$store.state.tab.valx
}
},
mounted(){
  // document.getElementsByTagName('i').click=function(index){
  //   this.tabs.splice(index,1)
  //   console.log('a')
  // }
}
}
</script>
<style lang="css" scoped>
.el-tag{
  margin-left: 15px;
  cursor:pointer;
}
</style>

